<html>
<head>
    <meta charset="utf-8">
    <title>全部来源</title>
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <link rel="stylesheet" type="text/css" href="/static/new_ui/new_css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/static/new_ui/new_css/base_v3.0.css">
    <link rel="stylesheet" type="text/css" href="/static/new_ui/new_css/themes.css">
    <link rel="stylesheet" type="text/css" href="/static/new_ui/new_css/colpick.css">
    <link href="http://ui.fcstatic.naryou.cn/static/libs/easyui/themes/icon.css" rel="stylesheet" type="text/css">
    <link style="width:16px; height=16px;" rel="shortcut icon" href="/static/new_ui/images/logo_s.png">
    <script type="text/javascript" src="/static/new_ui/new_js/jquery.js"></script>
    <script type="text/javascript" src="/static/libs/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/new_ui/new_js/base_v3.0.js"></script>
    <script type="text/javascript" src="/static/new_ui/new_js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/new_ui/new_js/build.js"></script>
    <script type="text/javascript" src="/static/new_ui/new_js/css3-mediaqueries.js"></script>
    <script type="text/javascript" src="/static/new_ui/new_js/themes.plugin.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/new_ui/new_css/datepicker.css">
    <script type="text/javascript" src="/static/new_ui/new_js/datepicker.js"></script>
    <script type="text/javascript" src="/static/new_ui/new_js/pagelation.js"></script>
    <script type="text/javascript" src="/static/new_ui/new_js/zepto.touchwipe.min.js"></script>
    <script type="text/javascript" src="/static/new_ui/new_js/colpick.js"></script>
    <script type="text/javascript">
        $.extend({  //jquery extend
            turnOnAjax: function (flag, str) {

                var html = "<div class='modal-backdrop fade in' id='ajaxloadimg' style='z-index:20000'><center><img src='/static/new_ui/img/ajaxloadimg.gif' style='margin: auto;width: 50px;margin-top: 20%;'><p style='color: white;font-weight: bold;'>" + str + "</p></center></div>"
                if (flag == 'on') {
                    $("body").append(html)
                } else {
                    $("#ajaxloadimg").remove();
                }
            },
        });
    </script>
</head>
<body>
<div class="container-fluid warp tops">
    <div class="row-fluid">
        <!--标题-->
        <h1 class="page-headers no-icon no-border inline-block">全部来源</h1>

        <div class="cus-sou-date">
            <p id="currentDayOfWeek"></p>

            <p id="currentDate"></p>
        </div>
        <div class="source-count">
            <span>今日:</span><strong id="todayTotalCount"><%= totalt %></strong>
            <span>累计:</span><strong id="totalCount"><%= totalall %></strong>
        </div>
        <!--今日概况-info-->
        <div class="today row-fluid">
            <ul class="clearFix">
                <li class="today-green">
                    <div>
                        <span>今日</span>

                        <h1 class="today-kdk"><%= tcustomer %></h1>
                        <strong>客带客</strong>

                        <p>累计：<strong class="total-kdk"><%= alcustomer %></strong></p>
                    </div>
                </li>
                <li class="today-skyblue">
                    <div>
                        <span>今日</span>

                        <h1 class="today-xms"><%= tsecretary %></h1>
                        <strong>小秘书</strong>

                        <p>累计：<strong class="total-xms"><%= alsecretary %></strong></p>
                    </div>
                </li>
                <li class="today-orange">
                    <div>
                        <span>今日</span>

                        <h1 class="today-wgw"><%= tminnet %></h1>
                        <strong>微官网</strong>

                        <p>累计：<strong class="total-wgw"><%= alminnet %></strong></p>
                    </div>
                </li>
                <li class="today-red">
                    <div>
                        <span>今日</span>

                        <h1 class="today-xx"><%= tline %></h1>
                        <strong>线下营销</strong>

                        <p>累计：<strong class="total-xx"><%= alline %></strong></p>
                    </div>
                </li>
                <li class="today-blue">
                    <div>
                        <span>今日</span>

                        <h1 class="today-qt"><%= tother %></h1>
                        <strong>其他</strong>

                        <p>累计：<strong class="total-qt"><%= allother %></strong></p>
                    </div>
                </li>
            </ul>
        </div>
        <!--数据图-->
        <div class="data-img-box">
            <div class="recent-time-one">
                <span class="login-img">客户来源分布图</span>
            </div>
            <!-- <lable class="data-img-input clearFix">
            <input id="startDate" name="startDate" value="2015-03-18" class="startTime w110" type="text" readonly="readonly">
            <em class="Icon1 Icon2"></em>
            <span class="sp1">至</span>
            <input id="endDate" name="endDate" value="2015-04-16" class="endTime w110" type="text" readonly="readonly">
            <em class="Icon1 Icon2"></em>
            </lable> -->
            <div class="data-img-info border-bottom" id="chart_bar" data-highcharts-chart="0">
                <div class="highcharts-container" id="highcharts-0"
                     style="position: relative; overflow: hidden; width: 1116px; height: 250px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif; font-size: 12px;">
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1116" height="250">
                        <desc>Created with Highcharts 3.0.7</desc>
                        <defs>
                            <clipPath id="highcharts-1">
                                <rect fill="none" x="0" y="0" width="1096" height="207"></rect>
                            </clipPath>
                        </defs>
                        <rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" width="1116" height="250"></rect>

                        <g class="highcharts-grid" zindex="1">
                            <path fill="none" d="M 10 148.5 L 1106 148.5" stroke="#C0C0C0" stroke-width="1" zindex="1"
                                  opacity="1"></path>
                            <path fill="none" d="M 10 79.5 L 1106 79.5" stroke="#C0C0C0" stroke-width="1" zindex="1"
                                  opacity="1"></path>
                            <path fill="none" d="M 10 10.5 L 1106 10.5" stroke="#C0C0C0" stroke-width="1" zindex="1"
                                  opacity="1"></path>
                            <path fill="none" d="M 10 217.5 L 1106 217.5" stroke="#C0C0C0" stroke-width="1" zindex="1"
                                  opacity="1"></path>
                        </g>
                        <g class="highcharts-axis" zindex="2">
                            <path fill="none" d="M 447.5 217 L 447.5 222" stroke="#C0D0E0" stroke-width="1"
                                  opacity="1"></path>
                            <path fill="none" d="M 667.5 217 L 667.5 222" stroke="#C0D0E0" stroke-width="1"
                                  opacity="1"></path>
                            <path fill="none" d="M 886.5 217 L 886.5 222" stroke="#C0D0E0" stroke-width="1"
                                  opacity="1"></path>
                            <path fill="none" d="M 1106.5 217 L 1106.5 222" stroke="#C0D0E0" stroke-width="1"
                                  opacity="1"></path>
                            <path fill="none" d="M 228.5 217 L 228.5 222" stroke="#C0D0E0" stroke-width="1"
                                  opacity="1"></path>
                            <path fill="none" d="M 9.5 217 L 9.5 222" stroke="#C0D0E0" stroke-width="1"></path>
                            <path fill="none" d="M 10 217.5 L 1106 217.5" stroke="#C0D0E0" stroke-width="1" zindex="7"
                                  visibility="visible"></path>
                        </g>

                        <g class="highcharts-series-group" zindex="3">
                            <g class="highcharts-series highcharts-tracker" visibility="visible" zindex="0.1"
                               transform="translate(10,10) scale(1 1)" style="" clip-path="url(#highcharts-1)">
                                <rect fill="#52CF83" x="80" y=<%= orgcustomer %> width="60" height=<%= alcustomer %> rx="0" ry="0"></rect>
                                <rect fill="#64DACE" x="299" y=<%= orgsecretary %> width="60" height=<%= alsecretary %> rx="0" ry="0"></rect>
                                <rect fill="#FC9105" x="518" y=<%= orgminnet %> width="60" height=<%= alminnet %> rx="0" ry="0"></rect>
                                <rect fill="#FF6E6E" x="737" y=<%= orgline %> width="60" height=<%= alline %> rx="0" ry="0"></rect>
                                <rect fill="#4AC0FF" x="956" y=<%= orgother %> width="60" height=<%= allother %> rx="0" ry="0"></rect>
                            </g>
                            <g class="highcharts-markers" visibility="visible" zindex="0.1"
                               transform="translate(10,10) scale(1 1)"></g>
                        </g>
                        <g class="highcharts-data-labels highcharts-tracker" visibility="visible" zindex="6"
                           transform="translate(10,10) scale(1 1)" style="">
                            <g zindex="1" transform="translate(103,181)" style="cursor:default;">
                                <text x="3" y=<%= alcustomer %>
                                      style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:13px;font-weight:bold;color:#757881;line-height:14px;fill:#757881;"
                                      zindex="1">
                                    <tspan x="3"><%= alcustomer %></tspan>
                                </text>
                            </g>
                            <g zindex="1" transform="translate(322,179)" style="cursor:default;">
                                <text x="3" y=<%= alsecretary %>
                                      style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:13px;font-weight:bold;color:#757881;line-height:14px;fill:#757881;"
                                      zindex="1">
                                    <tspan x="3"><%= alsecretary %></tspan>
                                </text>
                            </g>
                            <g zindex="1" transform="translate(541,181)" style="cursor:default;">
                                <text x="3" y=<%= alminnet %>
                                      style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:13px;font-weight:bold;color:#757881;line-height:14px;fill:#757881;"
                                      zindex="1">
                                    <tspan x="3"><%= alminnet %></tspan>
                                </text>
                            </g>
                            <g zindex="1" transform="translate(760,181)" style="cursor:default;">
                                <text x="3" y=<%= alline %>
                                      style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:13px;font-weight:bold;color:#757881;line-height:14px;fill:#757881;"
                                      zindex="1">
                                    <tspan x="3"><%= alline %></tspan>
                                </text>
                            </g>
                            <g zindex="1" transform="translate(970,181)" style="cursor:default;">
                                <text x="3" y=<%= allother %>
                                      style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:13px;font-weight:bold;color:#757881;line-height:14px;fill:#757881;"
                                      zindex="1">
                                    <tspan x="3"><%= allother %></tspan>
                                </text>
                            </g>
                        </g>
                        <g class="highcharts-axis-labels" zindex="7">
                            <text x="119.6" y="231"
                                  style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;fill:#666;"
                                  text-anchor="middle" opacity="1">
                                <tspan x="119.6">客带客</tspan>
                            </text>
                            <text x="338.79999999999995" y="231"
                                  style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;fill:#666;"
                                  text-anchor="middle" opacity="1">
                                <tspan x="338.79999999999995">小秘书</tspan>
                            </text>
                            <text x="558" y="231"
                                  style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;fill:#666;"
                                  text-anchor="middle" opacity="1">
                                <tspan x="558">微官网</tspan>
                            </text>
                            <text x="777.1999999999999" y="231"
                                  style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;fill:#666;"
                                  text-anchor="middle" opacity="1">
                                <tspan x="777.1999999999999">线下营销</tspan>
                            </text>
                            <text x="996.4" y="231"
                                  style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;fill:#666;"
                                  text-anchor="middle" opacity="1">
                                <tspan x="996.4">其他</tspan>
                            </text>
                        </g>
                    </svg>
                </div>
            </div>
        </div>
        <!--表头-->
    </div>
</div>
<script src="/static/libs/charts/hightcharts.js"></script>
<script>
    //选择信息块
    $(function () {
        //显示和隐藏说明向下
        var iconMy = $(".cus-sou-date").find("i");
        var iconDiv = $(".cus-sou-date").find(".explain-popup");
        iconDiv.hide();
        iconMy.hover(function () {
            iconDiv.show();
        }, function () {
            iconDiv.hide();
        });
        //左上角时间
        var today = new Date();
        $("#currentDate").text(today.getFullYear() + '年' + (today.getMonth() + 1) + '月' + today.getDate() + '日');
        //显示几天为星期几
        var week = new Array()
        week[0] = "天 ";
        week[1] = "一 ";
        week[2] = "二 ";
        week[3] = "三 ";
        week[4] = "四 ";
        week[5] = "五 ";
        week[6] = "六 ";
        $("#currentDayOfWeek").text('星期' + week[today.getDay()]);
        //初始化日期控件
        initDatePicker();
        //初始化列表数据和柱状图数据
        update();
    });
    //初始化日期控件
    function initDatePicker() {
        $('#startDate').DatePicker({
            format: 'Y-m-d',
            date: new Date().toLocaleDateString(),
            current: $('#startDate').val(),
            starts: 1,
            position: 'bottom',
            onBeforeShow: function () {
                var s_date = $('#startDate').val();
                if (null == s_date || "" == s_date) {
                    s_date = new Date().toLocaleDateString();
                }
                $('#startDate').DatePickerSetDate(s_date, true);
            },
            onChange: function (formated, dates) {
                if (formated) {
                    var endDate = $('#endDate').val();
                    if (compareDate(formated, endDate) > 0) {
                        saveResult(0, "开始日期不能大于结束日期！");
                        $('#startDate').DatePickerHide();
                        $('#startDate').focus();
                    } else {
                        $('#startDate').val(formated);
                        $('#startDate').DatePickerHide();
                        $('#startDate').focus();
                        update();
                    }
                } else {
                    $('#startDate').val(formated);
                    $('#startDate').DatePickerHide();
                    $('#startDate').focus();
                    update();
                }
            }
        });
        $('#endDate').DatePicker({
            format: 'Y-m-d',
            date: new Date().toLocaleDateString(),
            current: $('#endDate').val(),
            starts: 1,
            position: 'bottom',
            onBeforeShow: function () {
                var e_date = $('#endDate').val();
                if (null == e_date || "" == e_date) {
                    e_date = new Date().toLocaleDateString();
                }
                $('#endDate').DatePickerSetDate(e_date, true);
            },
            onChange: function (formated, dates) {
                if (formated) {
                    var startDate = $('#startDate').val();
                    if (compareDate(startDate, formated) > 0) {
                        saveResult(0, "结束日期不能小于开始日期！");
                        $('#endDate').DatePickerHide();
                        $('#endDate').focus();
                    } else {
                        $('#endDate').val(formated);
                        $('#endDate').DatePickerHide();
                        $('#endDate').focus();
                        update();
                    }
                } else {
                    $('#endDate').val(formated);
                    $('#endDate').DatePickerHide();
                    $('#endDate').focus();
                    update();
                }
            }
        });
    }
    //异步加载柱状图和历史数据列表
    function update() {
        var startDate = $('#startDate').val();
        var endDate = $('#endDate').val();
        $('.total-data').empty();
        $('.period-data').empty();
        $('.table .list-data').remove();
        $.get("/merse/customer/source/list", {"startDate": startDate, "endDate": endDate}, function (data) {
            if (data) {
                //更新表头的统计数据
                updateData(data.todayStatistic, data.totalStatistic);
                handleTotalData(data.totalStatistic);
                var periodData = data.periodStatistic;
                handlePeriodData(periodData);
                //处理历史数据列表
                handleList(data.customerSourceStatisticList);
                //生成柱状图
                handleHighCharts(periodData);
            }
        }, "json");
    }
    function updateData(todayData, totalData) {
        $('#todayTotalCount').text(todayData.totalCount);
        $('#totalCount').text(totalData.totalCount);
        $('.today .today-kdk').text(todayData.memberBringMemberCount);
        $('.today .total-kdk').text(totalData.memberBringMemberCount);
        $('.today .today-xms').text(todayData.consultantBringMemberCount);
        $('.today .total-xms').text(totalData.consultantBringMemberCount);
        $('.today .today-wgw').text(todayData.wapRegisterCount);
        $('.today .total-wgw').text(totalData.wapRegisterCount);
        $('.today .today-xx').text(todayData.offlineMarketingCount);
        $('.today .total-xx').text(totalData.offlineMarketingCount);
        $('.today .today-qt').text(todayData.otherCount);
        $('.today .total-qt').text(totalData.otherCount);
    }
    function handleList(listData) {
        var trArray = [];
        for (var i = 0; i < listData.length; i++) {
            var source = listData[i];
            trArray.push('<tr class="list-data">');
            trArray.push('<td><span>' + source.createDateStr + '</span></td>');
            trArray.push('<td><span class="font-weight">' + source.totalCount + '</span></td>');
            trArray.push('<td><span class="font-weight">' + source.memberBringMemberCount + '</span></td>');
            trArray.push('<td><span class="font-weight">' + source.consultantBringMemberCount + '</span></td>');
            trArray.push('<td><span class="font-weight">' + source.wapRegisterCount + '</span></td>');
            trArray.push('<td><span class="font-weight">' + source.offlineMarketingCount + '</span></td>');
            trArray.push('<td><span class="font-weight">' + source.otherCount + '</span></td>');
            trArray.push('</tr>');
        }
        $('.table').append(trArray.join(""));
    }
    function handleTotalData(totalData) {
        var trArray = [];
        trArray.push('<td><span class="font-weight">总计</span></td>');
        trArray.push('<td><span class="font-weight">' + totalData.totalCount + '</span></td>');
        trArray.push('<td><span class="font-weight">' + totalData.memberBringMemberCount + '</span></td>');
        trArray.push('<td><span class="font-weight">' + totalData.consultantBringMemberCount + '</span></td>');
        trArray.push('<td><span class="font-weight">' + totalData.wapRegisterCount + '</span></td>');
        trArray.push('<td><span class="font-weight">' + totalData.offlineMarketingCount + '</span></td>');
        trArray.push('<td><span class="font-weight">' + totalData.otherCount + '</span></td>');
        $('.total-data').append(trArray.join(""));
        $('.total-data').find('td').css({background: "#F0F0F0", fontWeight: "bold"});
    }
    function handlePeriodData(periodData) {
        var trArray = [];
        trArray.push('<td><span class="font-weight">时间内合计</span></td>');
        trArray.push('<td><span class="font-weight">' + periodData.totalCount + '</span></td>');
        trArray.push('<td><span class="font-weight">' + periodData.memberBringMemberCount + '</span></td>');
        trArray.push('<td><span class="font-weight">' + periodData.consultantBringMemberCount + '</span></td>');
        trArray.push('<td><span class="font-weight">' + periodData.wapRegisterCount + '</span></td>');
        trArray.push('<td><span class="font-weight">' + periodData.offlineMarketingCount + '</span></td>');
        trArray.push('<td><span class="font-weight">' + periodData.otherCount + '</span></td>');
        $('.period-data').append(trArray.join(""));
        $('.period-data').find('td').css({background: "#F0F0F0", fontWeight: "bold"});
    }
    function handleHighCharts(periodData) {
        var chart;
        $(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'chart_bar', //图表放置的容器，关联DIV#id
                    defaultSeriesType: 'column'//默认为柱状图
                },
                title: {
                    text: ''
                },
                credits: {
                    enabled: false   //不显示LOGO
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0,
                        pointWidth: 60
                    }
                },
                xAxis: [{ //X轴标签
                    categories: ['客带客', '小秘书', '微官网', '线下营销', '其他'],
                    labels: {
                        align: 'center'  //设置居中对齐
                    }
                }],
                yAxis: [{
                    title: {
                        text: ''
                    },
                    labels: {
                        enabled: false
                        /*formatter: function() {//格式化标签名称
                         return this.value;
                         },
                         style: {
                         color: '#16AC4E' //设置标签颜色
                         }*/
                    }
                }],
                tooltip: { //鼠标滑向数据区显示的提示框
                    formatter: function () {  //格式化提示框信息
                        return '' + this.x + ': ' + this.y + ' 人';
                    }
                },
                legend: {
                    enabled: false
                },
                series: [{  //数据列
                    color: '#16AC4E',
                    type: 'column', //类型：纵向柱状图
                    data: [{y: periodData.memberBringMemberCount, color: '#52CF83'},
                        {y: periodData.consultantBringMemberCount, color: '#64DACE'},
                        {y: periodData.wapRegisterCount, color: '#FC9105'},
                        {y: periodData.offlineMarketingCount, color: '#FF6E6E'},
                        {y: periodData.otherCount, color: '#4AC0FF'}],
                    dataLabels: {
                        enabled: true,
                        rotation: 0,
                        color: '#757881',
                        align: 'center',
                        x: 0,
                        y: 0,
                        style: {
                            fontSize: '13px',
                            fontWeight: 'bold'
                        }
                    }
                }]
            });
        });
    }
    function compareDate(strDate1, strDate2) {
        var date1 = new Date(strDate1.replace(/\-/g, "\/"));
        var date2 = new Date(strDate2.replace(/\-/g, "\/"));
        return date1 - date2;
    }
</script>
</body>
</html>